<!DOCTYPE html>
<html>
	<head>
		<title>smartfish</title>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=1024" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="description" content="bigeater impress.js html5 node websocket" />
		<meta name="author" content="Chunsheng Zhang" />
		<link href="http://fonts.googleapis.com/css?family=Open+Sans:regular,semibold,italic,italicsemibold|PT+Sans:400,700,400italic,700italic|PT+Serif:400,700,400italic,700italic" rel="stylesheet" />
		<link href="../css/impress-demo.css" rel="stylesheet" />
		<link rel="shortcut icon" href="../logo.png" />
		<link rel="apple-touch-icon" href="../logo.png" />
	</head>
	<body class="impress-not-supported">
		<div id="impress">
			<div id="bored" class="step slide" data-x="-1000" data-y="-1500">
					<h1 style="position:absolute;width:770px;top:260px;text-align:center;background-color:#C0C0C0;height:100px;font-size:60px;line-height:100px">nodejs + mongodb</h1>
			</div>
			<div id="title" class="step" data-x="0" data-y="1000" data-scale="4">
				<span>架构</span>
				<div>
					<img src="server.jpg" />
				</div>
			</div>
			<div id="its" class="step" data-x="850" data-y="4000" data-rotate="90" data-scale="5">
				<p>
					接口<br/>
					<ul>
						<li>1、获取所有房间</li>
						<li>2、获取单个房间</li>
						<li>3、加入房间</li>
						<li>4、更新房间食物</li>
						<li>5、新增用户</li>
						<li>6、离开房间</li>
					</ul>
				</p>
			</div>
			<div id="one-more-thing" class="step" data-x="6000" data-y="4000" data-scale="2">
				<p>
					数据格式json<br />
					获取所有房间<br />
					客户端：connection.send('{"dataType":"getAllRooms"}');<br />
					服务器端：{"roomInfo":[{"id":"room1","name":"room1","players":[],"foodInfo":[{"foodType":1,"foodNum":10}]},{"id":"room2","name":"room2","players":[],"foodInfo":[{"foodType":1,"foodNum":10}]}]}
				</p>
			</div>
			<div id="source" class="step" data-x="6300" data-y="2000" data-rotate="20" data-scale="4">
				mongodb<br />
				two collections:<br />
				1、房间信息<br />
				2、用户信息<br />
				主要使用方法：
				<p>find</p>
				<p>insert</p>
				<q>update</q>
			</div>
			<div id="thanks" class="step" data-x="6000" data-y="-300" data-scale="6">
				<p>
					谢谢!
				</p>
			</div>
		</div>
		<div class="hint">
			<p>使用方向键浏览</p>
		</div>
		<script>
			if ("ontouchstart" in document.documentElement) { 
				document.querySelector(".hint").innerHTML = "<p>Tap on the left or right to navigate</p>";
			}
		</script>
		<script src="../js/impress.js"></script>
		<script>impress().init();</script>
	</body>
</html>